<template>
    <div class="sousuo">
        <div class="kuang">
        <input type="search" class="ss" name="" id="" placeholder="搜索歌曲、歌手、专辑">
        </div>
        <div class="hot"><p>热门搜索</p></div>
        <li v-for="(item,index) in listData" :key="index">
            <a href="">{{item.first}}</a>
        </li>
    </div>
</template>
<script>
export default {
    data(){
        return{
            listData:[]
        };
    },
    created(){
        this.getSouSuoData();
    },
    methods:{
        getSouSuoData(){
            this.$request("get","/search/hot").then((res)=>{
                console.log(res.result)
                this.listData = res.result.hots;

            })
        }
    }
}
</script>
<style scoped>
.ss{
    width: 100%;
    height: 30px;
    line-height: 18px;
    background: #33333317;
    font-size: 14px;
    border: rgb(206, 206, 206);
    color: rgb(0, 0, 0);
    border-radius: 15px 15px 15px 15px;
    padding-left: 30px;
    background-image: url();
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: 0.5rem 0.3rem;
    outline: 0;
}
.hot{
    height: 2rem;
    font-size: 0.2rem;
}
.hot p{
    text-align: left;
}
.kuang{
    height: 2.8rem;
    border-bottom: #e7e7e7 1px solid;
    margin-bottom: 0.6rem;
}
li{
    display: inline-block;
    height: 32px;
    margin-bottom: 8px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 32px;
    color: #333;
}
li a{
    text-decoration: none;
    border: rgb(228, 228, 228) 1px solid;
    border-radius: 15px 15px 15px 15px;
    padding: 7px;
    padding-left: 12px;
    padding-right: 12px;
    color: #000;
}
</style>